<!DOCTYPE html>
<html>
<head lang="en">
	<title>人脸登录Demo</title>

	<link href="/css/index.css" rel="stylesheet" />
</head>
<body>
	<center>
		<img src="/images/logo.png" />
		<br/>
		<select id="sel1">
			<#list 1..7 as i>
				<option value="${i}">
					${i}
				</option>
			</#list>
		</select>
        <select id="sel2">
		<#list 1..7 as i>
            <option value="${i}">
			${i}
            </option>
		</#list>
        </select>
        <button onclick="generate()"> 生成 </button>
        <button onclick="verify()"> 检测 </button>
		<br/><br/>
        <img id="image1" src=""/>
        <img id="image2" src=""/>
        <h3 id="title"></h3>
	</center>

	<script type="text/javascript" src="/webjars/jquery/2.1.4/jquery.min.js"></script>

	<script>
		function verify() {
		    if($("#image1").attr("src")==""){
		        alert("请先生成图片");
		        return false;
			}else{
                $.post("/web/verify",function(data){
                    $("#title").text(data);
                });
			}
		}

        function generate() {
            $.post("/web/generate",{"sel1":$("#sel1").val(),"sel2":$("#sel2").val()},function(data){
                $("#image1").attr("src","data:image/gif;base64,"+data[0]);
                $("#image1").attr("title",data[0]);
                $("#image2").attr("src","data:image/gif;base64,"+data[1]);
                $("#image2").attr("title",data[1]);
            });
        }
	</script>
</body>
</html>